<template>
  <div class="customScroll">
    <div class="cs-inner" :style="container_style">
      <div class="cs-scroll" @scroll="onScroll" :style="scroll_style">
        <slot></slot>
      </div>
      <div class="cs-scroll">
        <div class="cs-horizontal" v-if="xEnable" :style="horizontal_style_wrap">
          <div class="cs-horizontal-bar" :style="horizontal_style"></div>
        </div>
        <div class="cs-vertical" v-if="yEnable" :style="vertical_style_wrap">
          <div class="cs-vertical-bar" :style="vertical_style"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props : ['from'],
  data() {
    return {
      horizontal_style : {},
      horizontal_style_wrap : {},
      vertical_style : {},
      vertical_style_wrap : {},
      container_style : {},
      scroll_style : {},
      config : {},
      xEnable : false,
      yEnable : false,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    onScroll(e){
      let dom = $(this.$el);
      let sl = dom.find('.cs-scroll').scrollLeft();
      let st = dom.find('.cs-scroll').scrollTop();

      let { ow,sw,sh,oh,bw,bh } = this.config;

      let bar_left = sl / sw * bw;
      let bar_top = st / sh * bh;

      this.horizontal_style = {
        width : this.config.bar_width + 'px',
        transform : `translate3d(${ bar_left }px,0,0)`
      }
      this.vertical_style = {
        height : this.config.bar_height + 'px',
        transform : `translate3d(0,${ bar_top }px,0)`
      }

    },
    init(){
      let { axis,axisX,axisY } = this.from;
      let axisX_default = {
        limit : [0,0],
        position : [0,0],
      }
      let axisY_default = {
        limit : [0,0],
        position : [0,0],
      }
      axisX = Object.assign({},axisX_default,axisX);
      axisY = Object.assign({},axisY_default,axisY);

      let ow,sw,oh,sh,bar_width,bar_height,container_style,scroll_style,bw,bh;
      let dom = $(this.$el);
      if(axis == 'x' || axis == 'xy'){
        this.from.w = this.from.w || $(this.$el).width();
        ow = this.from.w;
        bw = ow - axisX.limit[0] - axisX.limit[1];
        container_style = {
          width : ow + 'px',
          height : oh + 'px',
        }
        scroll_style = Object.assign({},container_style,{
          "overflow-x": "auto",
          //"overflow-y" : axis == 'x' ? "hidden" : "auto"
          "overflow-y" : "auto",
        });

      }
      if(axis == 'y' || axis == 'xy'){
        oh = this.from.h;
        bh = oh - axisY.limit[0] - axisY.limit[1];

        container_style = {
          width : ow + 'px',
          height : oh + 'px',
        }
        scroll_style = Object.assign({},container_style,{
          "overflow-y": "auto",
          //"overflow-x" : axis == 'y' ? "hidden" : "auto"
          "overflow-x" : "auto"
        })
      }

      this.container_style = container_style;
      this.scroll_style = scroll_style;

      this.$nextTick(res => {
        sw = dom.find('.cs-scroll > *').width();
        bar_width = ow / sw * bw;
        sh = dom.find('.cs-scroll > *').height();
        bar_height = oh / sh * bh;


        this.container_style = container_style;
        this.scroll_style = scroll_style;

        this.config = {
          width : bar_width,
          height : bar_height,
          sw,
          sh,
          ow,
          oh,
          bw,
          bh,
        }
        this.horizontal_style = {
          width : bar_width + 'px'
        }
        let [left,right] = axisX.limit;
        let [hx,hy] = axisX.position;
        this.horizontal_style_wrap = {
          left : left + 'px',
          right : right + 'px',
          transform : `translate3d(${ hx }px,${ hy }px,1px)`,
        }
        this.vertical_style = {
          height : bar_height + 'px'
        }

        let [top,bottom] = axisY.limit;
        let [vx,vy] = axisY.position;
        this.vertical_style_wrap = {
          top : top + 'px',
          bottom : bottom + 'px',
          transform : `translate3d(${ vx }px,${ vy }px,1px)`,
        }

        let from = this.from;

        //判断是否开启
        if(from.axis == 'x' || from.axis == 'xy'){
          if(sw > ow){
            this.xEnable = true;
          }
        }
        if(from.axis == 'y' || from.axis == 'xy'){
          if(sh > oh){
            this.yEnable = true;
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.customScroll{
  .cs{
    &-inner{
      position:relative;
    }
    &-scroll{
      &::-webkit-scrollbar{
        display:none;
      }
    }
    &-horizontal{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:5px;
      background:rgba(81,128,244,0.1);
      border-radius:10px;
      transform-style:preserve-3d;
      overflow:hidden;
      pointer-events:none;
      transform:translate3d(0,0,1px);
      z-index:1;
      &-bar{
        background:rgba(81,128,244,1);
        height:5px;
        border-radius:5px;
      }
    }
    &-vertical{
      position:absolute;
      top:0;
      bottom:0;
      right:0;
      width:5px;
      z-index:1;
      background:rgba(81,128,244,0.1);
      border-radius:10px;
      transform-style:preserve-3d;
      transform:translate3d(0,0,1px);
      overflow:hidden;
      pointer-events:none;
      &-bar{
        background:rgba(81,128,244,1);
        width:5px;
        border-radius:5px;
      }
    }
  }
}
</style>
